<template>
  <div class="box app-container" >
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" :body-style="{height:'calc(100vh - 230px)'}">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-button type="primary" v-if="hasEyeDrop" @click="nativePick">打开取色器</el-button>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formInline.color"></el-input>
            </el-form-item>
            <el-form-item>
              <el-color-picker
                v-model="formInline.color"
                show-alpha
                :predefine="predefineColors">
              </el-color-picker>
            </el-form-item>
            <el-form-item>
              <div :style="{background: formInline.color}" class="content"></div>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'index',
  data() {
    return {
      formInline:{
        color: 'rgba(255, 69, 0, 0.68)',
      },
      hasEyeDrop: 'EyeDropper' in window,
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  },
  methods: {
    async nativePick (e){
      const val =  e ? e.target.value : null
      if (val) {
        console.log('获得颜色: ' + val)
        this.formInline.color = val
      } else {
        const eyeDropper = new window.EyeDropper() // 初始化一个EyeDropper对象
        console.log('按Esc可退出')
        try {
          const result = await eyeDropper.open() // 开始拾取颜色
          console.log('获得颜色: ' + result.sRGBHex)
          this.formInline.color = result.sRGBHex
        } catch (e) {
          console.log('用户取消了取色')
        }
      }
    }
  },

}
</script>

<style scoped lang="scss">
.box{
  .content{
    width: 200px;
    height: 200px;
  }
}
</style>
